<template>

	<view class="count p-20">
		<view class="topText p-20 b-f b-r-20">
			<view class="top f f-a-c ">
				<text>*</text>
				<view class="">
					意见反馈
				</view>
			</view>
			<textarea name="" class="textaren" placeholder="请输入意见文字" v-model="value" id="" cols="30"
				rows="10"></textarea>
		</view>
		<!-- 下面的图片上传 -->
		<view class="unload b-f p-20 b-r-20 m-t-20">
			<view class="imgName m-b-20">
				图片上传 <text>（多张）</text>
			</view>
			<u-upload ref="uUpload" @on-remove="onRemove" :show-progress="false" upload-text="点击上传" max-count="9"
				:form-data="fromData" width="190" @on-success="succress" :before-upload="beforeUpload" height="190"
				:action="url"></u-upload>
		</view>
		<!-- 下面的提交 -->
		<view @click="submig" class="submit">
			提交
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				url: 'https://up-z2.qiniup.com',
				token: '',
				fromData: {
					token: uni.getStorageSync('upload_token'),
					key: ''
				},
				url: uni.getStorageSync('upload_domain'),
				token: uni.getStorageSync('upload_token'),
				domain: uni.getStorageSync('domain'),
				imgList: []
			}
		},
		onLoad(options) {
			this.fromData.key = this.genKey()
		},
		methods: {
			succress(data, index, lists, name) {
				console.log(data, index, lists, name, '999999999');
				this.imgList.push(this.domain + '/' + data.key)
			},
			genKey() {
				let n = `img/${+new Date()+'/'+this.randomString()}.png`
				console.log(n);
				return n
			},
			onRemove(index, lists) {
				console.log(index, lists, '图片已被移除')
				this.imgList = []
				lists.forEach(item => {
					this.imgList.push(this.domain + '/' + item.response.key)
				})
			},
			beforeUpload(index, list) {
				console.log(index, list, '000');
				// this.imgList = list.filter(item => {
				// 	return this.domain + '/' + item.response.key
				// })
				this.fromData.key = this.genKey()
				console.log(this.fromData, '8888888');
				return true
			},
			randomString() {
				let str = 'ABCDEFGHIJKIMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
				let num = '';
				for (let i = 0; i < 16; i++) {
					num += str.charAt(Math.floor(Math.random() * str.length));
				}
				console.log(num, '000000000000');
				return num;
			},
			async submig() {
				let n = await this.$api.Feedback({
					content: this.value,
					images: this.imgList.join(',')
				})
				this.$msg(n.message)
				if (n.status) {
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				}
			}
		}
	}
</script>
<style>
	page {
		background-color: #f6f6f6;
	}
</style>
<style lang="scss" scoped>
	.submit {
		width: 100%;
		height: 88rpx;
		line-height: 85rpx;
		background: #009d85;
		border-radius: 44rpx;
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: center;
		color: #ffffff;
		margin-top: 300rpx;
	}

	.imgName {
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: left;
		color: #333333;

		text {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: left;
			color: #999999;
		}
	}

	.textaren {
		height: 250rpx;
		width: 100%;
		margin-top: 20rpx;
	}

	.top {
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 600;
		text-align: left;
		color: #333333;

		text {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: left;
			margin-right: 10rpx;
			color: #e53434;
		}
	}
</style>